import { shallowMount } from "@vue/test-utils";
import Header from "../../components/Header";

describe("Header组件测试", () => {
  it('header组件完整性测试',()=>{
    const wrapper = shallowMount(Header);
    expect(wrapper).toMatchSnapshot();
  })


  it("组件必须包含一个input输入框", () => {
    const wrapper = shallowMount(Header);
    const inputEl = wrapper.find('[data-test="input"]');
    expect(inputEl.exists()).toBeTruthy();
  });

  it("组件内Input输入框的初始值应该为空", () => {
    const wrapper = shallowMount(Header);
    const inputVal = wrapper.vm.$data.inputVal;

    expect(inputVal).toBe("");
  });

  it('组件内input输入框值发生变化时，数据应该跟着变',()=>{
    const wrapper = shallowMount(Header);
    const inputEl = wrapper.find('[data-test="input"');
    inputEl.setValue('haha');
    const inputVal = wrapper.vm.$data.inputVal;
    expect(inputVal).toEqual('haha');
  });


  it('input如果没有值，按下回车键应该无反应',()=>{
    const wrapper = shallowMount(Header);
    const inputEl = wrapper.find('[data-test="input"]');
    inputEl.setValue('');
    inputEl.trigger('keyup.enter');
    expect(wrapper.emitted().add).toBeFalsy();
  });

  it('input如果有值，按下回车键，向外触发事件, 同时清空input框内的值',()=>{
    const wrapper = shallowMount(Header);
    const inputEl = wrapper.find('[data-test="input"]');
    inputEl.setValue('haha');
    inputEl.trigger('keyup.enter');

    expect(wrapper.emitted().add).toBeTruthy();
    expect(wrapper.vm.$data.inputVal).toEqual('');
  })
});
